<template>
  <div>

    <el-table
      :data="resourcelist"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="id"
        label="编号"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="wenjian"
        label="附件文件"
        width="150">
        <template slot-scope="scope">
          <img v-if="scope.row.wenjian!=null" :src="'/api/resource/download/'+scope.row.wenjian" width="70px" height="70px">
        </template>
      </el-table-column>
      <el-table-column
        prop="resourceName"
        label="资产名称"
        align="center"
        width="150">
      </el-table-column>

      <el-table-column
        prop="miao"
        label="资产包描述"
        align="center"
        width="200">
      </el-table-column>
      <el-table-column
        prop="status"
        label="数据资产标签"
        align="center"
        width="150">
        <template slot-scope="scope">
        {{scope.row.status | statusFit}}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="380">
        <template slot-scope="scope">

          <el-button type="info"  plain round v-if="scope.row.status=='5'?!isShow:isShow" @click="deleteResource(scope.row)">删除</el-button>
          <el-button type="primary" plain  round v-if="scope.row.status=='5'?!isShow:isShow" @click="get(scope.row.id)">编辑</el-button>
          <el-button type="danger"  plain round v-if="scope.row.status=='5'?!isShow:isShow" @click="dialogFormVisible222=true">推送</el-button>
          <el-button type="success" plain round v-if="scope.row.status=='5'?!isShow:isShow" @click="publish(scope.row.id)">发布</el-button>

        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="可推送用户" :visible.sync="dialogFormVisible222">
      <el-table
        ref="multipleTable"
        :data="userlist"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          fixed
          prop="id"
          label="编号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="300">
          <template slot-scope="scope">
            <el-button type="primary" @click="push(scope.row.id)">推送</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>



    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="resourceForm">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="数据资产名称">
              <el-input v-model="resourceForm.resourceName"  placeholder="请输入数据资产名称"></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="6">-->
<!--            <el-form-item label="数据资产包描述">-->
<!--              <el-input v-model="resourceForm.miao" placeholder="请输入数据资产包描述"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item label="数据资产标签">-->
<!--              <el-input v-model="resourceForm.status" placeholder="请输入数据资产标签"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="数据资产包描述">
              <el-input v-model="resourceForm.miao" placeholder="请输入数据资产包描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="文件">
              <el-upload
                class="avatar-uploader"
                action="/api/resource/upload"
                :headers="auth"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="resourceForm.wenjian!= null" :src="'/api/resource/download/'+resourceForm.wenjian" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveResource()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: 'UserList',
    data(){
      return{
        fabuForm:{},
        dialogFormVisible222:false,
        userlist:[],
        dialogFormVisible:false,
        isShow:true,
        resourceForm:{},

        multipleSelection:[],
        names:[],
        user:{},

        userForm:{},
        auth:{token:null},
        userFormVisible:false,
        resourcelist:[],
        searchForm:{},

        form:{},

        formform:{},
      }
    },
    methods: {

      searchlist: function () {//用户列表
        this.id = sessionStorage.getItem("uid");
        this.$http.post("/resource/list/"+this.id).then((res) => {
          this.resourcelist = res.data.result;

        });
      },

      searchlist2: function () {//用户列表
        this.$http.post("/user/list",{}).then((res) => {
          this.userlist = res.data.result;

        });
      },

      push:function(id){
        this.$http.post("/resource/push/"+id).then((res) => {
          if (res.data.success) {
            this.$message.success(res.data.message);
            this.searchlist();
            this.dialogFormVisible222=false;
          } else {
            this.$message.success(res.data.message);
          }
        })
      },
      handleAvatarSuccess (res) {
        this.resourceForm.wenjian = res.result.path;
      },
      beforeAvatarUpload (file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      saveResource: function () {
        this.resourceForm.uid = this.user.id;
        this.$http.post("/resource/save", this.resourceForm).then((res) => {
          if (res.data.success) {
            this.resourceForm = {};
            this.$message.success(res.data.message);
            this.searchlist();
            this.dialogFormVisible=false;
          } else {
            this.$message.error(res.data.message);
          }
        })
      },

      get: function (id) {
         this.dialogFormVisible=true;
         this.$http.get("/resource/get/" + id).then((res) => {
          if (res.data.success) {
            this.resourceForm = res.data.result;
          } else {
            this.$message.error(res.data.message);
          }
        })
      },


      publish: function (id) {
        this.$http.post("/resource/publish/"+id).then((res) => {
          if (res.data.success) {
            this.$message.success(res.data.message);
            this.searchlist();
          } else {
            this.$message.error(res.data.message);
          }
        })
      },


      deleteResource: function (row) {
        this.from = row;
        row.status = 5;
        this.$http.post("/resource/deleteResource",this.from).then((res) => {
          if (res.data.success) {
            this.$message.success(res.data.message);
            this.searchlist();
          } else {
            this.$message.error(res.data.message);
          }
        })
      },




    },
    mounted () {
      this.searchlist();
      this.searchlist2();
      // this.auth.token = sessionStorage.getItem("token");
    },
    filters:{
      statusFit:function(val){
        if(val==0){
          return "正常";
        }
        if(val==2){
          return "已推送";
        }
        if(val==3){
          return "发布";
        }
        if(val==4){
          return "未发布";
        }
        if(val==5){
          return "已删除";
        }

        return val;
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
